<script setup>

import {ref, defineEmits} from 'vue'

import TwoImages from '@/components/common/TwoImages.vue'

const emit = defineEmits(['submit'])

const singleOrSplit = ref([
    {
      title: "single panel",
      image: "https://cdn.shopify.com/s/files/1/0744/8598/9591/files/Measurement-Finder_A8.svg?v=1745721879", // Replace with actual path
      description: ""
    },
   {
  title: "split panels",
    image: "https://cdn.shopify.com/s/files/1/0744/8598/9591/files/Measurement-Finder_A9.svg?v=1745721961", // Replace with actual path
  description: ""
   },
]);

const selected = (data) => {
  emit('submit', data)
}

</script>

<template>

  <div class="content-container">
    <div class="question">Do you want single or split panels?</div>

    <TwoImages :drapery-rod-installed="singleOrSplit" @selected="selected"/>
  </div>



</template>

<style scoped>

.question {
  text-align: center;
}

.content-container {
   width: 60%;
   margin: 0 auto;
}

</style>